<template>
  <div>
    <div>
      <div style="margin-bottom: 20px">
      <el-input style="width: 140px" clearable placeholder="请输入套餐名称" v-model="name"/>
      <el-select size="small" v-model="categoryId" placeholder="请选择套餐分类" clearable>
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="status"  placeholder="请选择售卖状态" clearable>
        <el-option v-for="item in statusArr"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"/>
      </el-select>
      <el-button type="primary" style="margin-left: 20px" @click="pageQuery()"> 查询</el-button>
        <div style="float: right">
          <el-button type="danger" @click="handleDelete('B')"> 批量删除</el-button>
          <el-button type="info" @click="handleAdd"> + 新建套餐</el-button>
        </div>
      </div>

      <el-table :data="records" border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%" @selection-change="handleSelectionChange">
        <!--selection 复选框-->
        <el-table-column type="selection" style="padding-left: 10px;margin-right: 30px" min-width="50"/>
        <el-table-column prop="name" label="套餐名称"/>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image style="width: 80px; height: 40px; border: none" :src="scope.row.image"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="套餐分类"/>
        <el-table-column prop="price" label="套餐价"/>
        <el-table-column label="售卖状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===1" type="success">启售</el-tag>
            <el-tag v-else type="danger">禁售</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleUpdate(scope.row)"> 修改</el-button>
            <el-button type="text" size="small" @click="handleStartOrStop(scope.row)">
              {{ scope.row.status == '1' ? '停售' : '启售' }}
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete('S',scope.row.id)"> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pageList"
                     style="text-align: center;margin-top: 10px"
                     :page-sizes="[10, 20, 30, 40]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import category from "@/views/category/category.vue";

export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      name: '', //套餐名称
      status: '', //售卖状态
      categoryId: '', //分类id
      total: 0,
      type: 2,
      records: [],
      options: [], //分类下拉框数据
      statusArr: [ //为售卖状态下拉框提供的数据
        {
          value: '1',
          label: '启售'
        }, {
          value: '0',
          label: '停售'
        }
      ],
      multipleSelection: [] //当前被选中的行
    }
  },
  created() {
    // 查询套餐分类，用于填充查询页面的下拉框
    request.get(`/admin/category/list/${this.type}`).then(res => {
      if (res.code == 1) {
        this.options = res.data
      }
    })

    // 查询套餐分页数据
    this.pageQuery()
  },
  methods: {
    // 套餐分页查询
    pageQuery() {
      //封装分页查询参数
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.name,
        status: this.status,
        categoryId: this.categoryId
      }
      //调用分页查询接口
      request.get('/admin/winepackage/page', {params}).then(res => {
        if (res.code === 1) {
          this.total = res.data.total
          this.records = res.data.records
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    //分页条的事件处理函数，pageSize 改变时会触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageQuery()
    },
    //分页条的事件处理函数，currentPage 改变时会触发
    handleCurrentChange(page) {
      this.page = page
      this.pageQuery()
    },
    //套餐起售、停售
    handleStartOrStop(row) {
      this.$confirm('确认调整该套餐的售卖状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const p = {
          id: row.id, // 员工ID
          status: !row.status ? 1 : 0 // 当前状态值
        }
        request.post(`/admin/winepackage/status/${p.status}`, JSON.stringify(p.id))
            .then((res) => {
              if (res.code === 1) {
                this.$message.success('套餐售卖状态更改成功！')
                this.pageQuery()
              }else {
                this.$message.error(res.msg)
              }
            })
            .catch((err) => {
              this.$message.error('请求出错了：' + err.message)
            })
      }).catch(() => {
        this.$message.info('取消操作');
      });
    },
    //删除套餐
    //删除套餐
// 删除套餐
    handleDelete(type, id) {
      if (type === 'B' && this.multipleSelection.length == 0) {
        this.$message('请选择需要删除的套餐！');
        return;
      }
      this.$confirm('确定删除该套餐?', '确定删除', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = '';
        // 判断当前是单个删除还是批量删除
        if (type === 'S') {
          // 单个删除
          params = `ids=${id}`;
        } else {
          // 批量删除
          const ids = this.multipleSelection.map(element => element.id).join(',');
          params = `ids=${ids}`; // 将数组中的id拼接到一起，中间用逗号分隔
        }
        // 发送 DELETE 请求，附带查询参数
        request.delete(`/admin/winepackage?${params}`)
            .then(res => {
              if (res.code === 1) {
                this.$message.success('删除成功！');
                this.pageQuery();
              } else {
                this.$message.error(res.msg);
              }
            });
      }).catch(() => {
        this.$message.info('取消操作');
      });
    },

    //当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      // val 参数就是新选中的行数据数组。
      this.multipleSelection = val
      //alert(this.multipleSelection.length)
    },
    //新增套餐，跳转到新增页面（组件）
    handleAdd() {
      this.$router.push('/winePackage/add')
    },

    // 编辑类别
    handleUpdate(row) {
      this.$router.push({
        path: '/winePackage/add',
        query: {
          // data:row,
          id: row.id,
          // status: row.status,
          // price: row.price,
          // imageUrl: row.image,
          // checkList: row.winepackageWines,
          // wineTable: row.winepackageWines,
          // idType: row.categoryId
        }
      });
    },
  }
}
</script>
<style>

</style>

